<%@ page language="java" contentType="text/html; charset=utf-8"
	import="java.util.*,java.text.SimpleDateFormat,com.javabean.*,com.model.*;"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css"
	href="../jqueryui/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="../jqueryui/js/jquery-1.9.0.js" type="text/javascript"></script>
<script src="../jqueryui/js/jquery-ui-1.10.0.custom.js"
	type="text/javascript"></script>
<style>
.ui-widget-content {
	width: 100%;
	font-size: 1.9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}

.img {
	width: 6px;
	height: 6px;
}
</style>
</head>
<%
	SimpleDateFormat df = new SimpleDateFormat("yyyy-M");//设置日期格式2013-5
	String presenttime = df.format(new Date());//今天的时间
	MeetingService ms = new MeetingService();
%>

<body style="margin: 0px;" onload="javascript: cal()">

	<div
		class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"
		style="width: 98.8%; display: block;">
		<div>
			<div id="table"></div>
			<div style="margin-top: 25px; margin-left: 25px;"
				class="ui-datepicker-prev ui-corner-all" title="&lt;上月">
				<div class="ui-icon ui-icon-circle-triangle-w"
					onclick="javascript: pre()">&lt;上月</div>
			</div>
			<div style="margin-top: 25px;"
				class="ui-datepicker-next ui-corner-all" title="下月&gt;">
				<div class="ui-icon ui-icon-circle-triangle-e"
					onclick="javascript: next()">下月&gt;</div>
			</div>
		</div>
	</div>
	<!--  
	<div style="float: right; color: red;">注：四个标志分别代表四个时间段</div>
	-->
	<script>
		var Time = new Date();
		//var i = Time.getFullYear()*10000 + (Time.getMonth()+1)*100 + Time.getDate();
		function cal() {
			RL(Time);
		}

		function pre() {
			var pre = new Date(Time.getFullYear(), Time.getMonth() - 1, Time
					.getDate());
			Time.setFullYear(Time.getFullYear(), Time.getMonth() - 1, Time
					.getDate());
			RL(pre);
		}
		function next() {
			var mon = Time.getMonth() + 1;
			var next = new Date(Time.getFullYear(), mon, Time.getDate());
			Time.setFullYear(Time.getFullYear(), mon, Time.getDate());
			RL(next);
		}
	</script>
	<script>
		function RL(d) {
			var maxRow = 6;
			var maxCol = 7;

			var today = new Date();

			var wk = d.getDay();
			var Year = d.getFullYear();
			var Month = d.getMonth() + 1;
			var Day = d.getDate();

			var pre = new Date(Year, Month - 1, 0);
			var preYear = pre.getFullYear();
			var preMonth = pre.getMonth() + 1;
			var preDay = pre.getDate();

			var next = new Date(Year, Month, 1);
			var nextYear = next.getFullYear();
			var nextMonth = next.getMonth() + 1;
			var nextDay = next.getDate();

			var Num = new Date(Year, Month, 0);
			var dayNum = Num.getDate();

			var firstday = wk - (d.getDate() - 1) % 7;
			if (firstday < 0)
				firstday = firstday + 7;
			var now = Day;

			var strTbl = "<table  class='ui-widget-content'><tbody>";
			var strBody = "<tr style='margin:5px;height:60px' align='center' class='ui-datepicker-header ui-widget-header ui-corner-all'><td colspan='7'>"
					+ Year
					+ "年"
					+ Month
					+ "月"
					+ "</td></tr><tr align='center' style='font-weight: bold; height:60px' class='ui-widget-title'><td>周日</td><td>周一</td><td>周二</td><td>周三</td><td>周四</td><td>周五</td><td>周六</td></tr>";
			for ( var i = 1; i <= maxRow; i++) {
				strBody += "<tr>";
				for ( var j = 1; j <= maxCol; j++) {
					if (i == 1 && j == firstday + 1) {
						if (Month < 10) {
							strBody += "<td><a href='meetBooking2.jsp?date="
									+ Year
									+ "-0"
									+ Month
									+ "-01' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id='0"
									+ 1
									+ "'><span style='width:60px;font-size:12px;' id='01-1'><br/></span>1</a></td>";
							statusDisplay(Year + "-0" + Month, "01");
						} else {
							strBody += "<td><a href='meetBooking2.jsp?date="
									+ Year
									+ "-"
									+ Month
									+ "-01' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id='0"
									+ 1
									+ "'><span style='width:60px;font-size:12px;' id='01-1'><br/></span>1</a></td>";
							statusDisplay(Year + "-" + Month, "01");
						}
						now++;
					} else if (i == 1 && j <= firstday) {
						var s = preDay - firstday + j;
						strBody += " <td><a style='bord: 1px; color:#DDD' id='"+ preYear + "/" + preMonth + "/" + s +"'><span style='width:50px;font-size:6px;'><br/></span>"
								+ s + "</a></td>";
					} else if (now >= dayNum + Day) {
						var q = (i - 1) * 7 + j - firstday - dayNum;
						strBody += "<td><a style='bord: 1px; color:#DDD' id='"+ nextYear + "/" + nextMonth + "/" + q +"'><span style='width:50px;font-size:6px;'><br/></span>"
								+ q + "</a></td>";
					} else {
						var t = (i - 1) * 7 + j - firstday;
						var cha = now - Day + 1;

						if (cha == today.getDate()
								&& Month - 1 == today.getMonth()
								&& Year == today.getFullYear()) {
							if (cha < 10)
								if (Month < 10) {
									strBody += "<td><a href='meetBooking2.jsp?date="
											+ Year
											+ "-0"
											+ Month
											+ "-0"
											+ cha
											+ "' class='ui-state-default ui-state-highlight' style='background:#FEF' id='0"
											+ cha
											+ "'>"
											+ "<span style='width:60px;font-size:12px;' id='0"+cha+"-1'><br/></span>"
											+ t + "</a></td>";
									statusDisplay(Year + "-0" + Month, "0" + cha);
								} else {
									strBody += "<td><a href='meetBooking2.jsp?date="
											+ Year
											+ "-"
											+ Month
											+ "-0"
											+ cha
											+ "' class='ui-state-default ui-state-highlight' style='background:#FEF' id='0"
											+ cha
											+ "'>"
											+ "<span style='width:60px;font-size:12px;' id='0"+cha+"-1'><br/></span>"
											+ t + "</a></td>";
									statusDisplay(Year + "-" + Month, "0" + cha);
								}
							else if (Month < 10) {
								strBody += "<td><a href='meetBooking2.jsp?date="
										+ Year
										+ "-0"
										+ Month
										+ "-"
										+ cha
										+ "' class='ui-state-default ui-state-highlight' style='background:#FEF' id='"
										+ cha
										+ "'>"
										+ "<span style='width:60px;font-size:12px;' id='"+cha+"-1'><br/></span>"
										+ t + "</a></td>";
								statusDisplay(Year + "-0" + Month, cha);
							} else {
								strBody += "<td><a href='meetBooking2.jsp?date="
										+ Year
										+ "-"
										+ Month
										+ "-"
										+ cha
										+ "' class='ui-state-default ui-state-highlight' style='background:#FEF' id='"
										+ cha
										+ "'>"
										+ "<span style='width:60px;font-size:12px;' id='"+cha+"-1'><br/></span>"
										+ t + "</a></td>";
								statusDisplay(Year + "-" + Month, cha);
							}
						} else if (cha < 10) {
							if (Month < 10) {
								strBody += "<td><a href='meetBooking2.jsp?date="
										+ Year
										+ "-0"
										+ Month
										+ "-0"
										+ cha
										+ "' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id=0'"
										+ cha
										+ "'>"
										+ "<span style='width:60px;font-size:12px;' id='0"+cha+"-1'><br/></span>"
										+ t + "</a></td>";
								statusDisplay(Year + "-0" + Month, "0" + cha);
							} else {
								strBody += "<td><a href='meetBooking2.jsp?date="
										+ Year
										+ "-"
										+ Month
										+ "-0"
										+ cha
										+ "' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id=0'"
										+ cha
										+ "'>"
										+ "<span style='width:60px;font-size:12px;' id='0"+cha+"-1'><br/></span>"
										+ t + "</a></td>";
								statusDisplay(Year + "-0" + Month, "0" + cha);
							}
						} else if (Month < 10) {
							strBody += "<td><a href='meetBooking2.jsp?date="
									+ Year
									+ "-0"
									+ Month
									+ "-"
									+ cha
									+ "' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id='"
									+ cha
									+ "'>"
									+ "<span style='width:60px;font-size:12px;' id='"+cha+"-1'><br/></span>"
									+ t + "</a></td>";
							statusDisplay(Year + "-0" + Month, cha);
						} else {
							strBody += "<td><a href='meetBooking2.jsp?date="
									+ Year
									+ "-"
									+ Month
									+ "-"
									+ cha
									+ "' class='ui-state-default' style='background-color:#FFF; border:1px solid #d3d3d3' id='"
									+ cha
									+ "'>"
									+ "<span style='width:60px;font-size:12px;' id='"+cha+"-1'><br/></span>"
									+ t + "</a></td>";
							statusDisplay(Year + "-" + Month, cha);
						}
						now++;
					}
				}
				strBody += "</tr>";
			}

			strTbl = strTbl + strBody + "</tbody></table>";
			$("#table").html(strTbl);
		}
/*
		function statusDisplay(presenttime, day) {
			// string 2013-5  int 24	 
			$.ajax({
				url : "MonthCheck",
				type : "GET",
				data : {
					presenttime : presenttime,
					day : day,
				},
				dataType : "json",
				success : function(data) {
					if (data.status & 0x01)
						$("#" + data.day + "-1")
								.prop("src", "../image/red.jpg");
					else
						$("#" + data.day + "-1").prop("src",
								"../image/green.jpg");
					if (data.status & 0x02)
						$("#" + data.day + "-2")
								.prop("src", "../image/red.jpg");
					else
						$("#" + data.day + "-2").prop("src",
								"../image/green.jpg");
					if (data.status & 0x04)
						$("#" + data.day + "-3")
								.prop("src", "../image/red.jpg");
					else
						$("#" + data.day + "-3").prop("src",
								"../image/green.jpg");
					if (data.status & 0x08)
						$("#" + data.day + "-4")
								.prop("src", "../image/red.jpg");
					else
						$("#" + data.day + "-4").prop("src",
								"../image/green.jpg");
				}
			});
		}*/
		function statusDisplay(presenttime, day) {
			// string 2013-5  int 24	 
			$.ajax({
				url : "MonthCheck",
				type : "GET",
				data : {
					presenttime : presenttime,
					day : day
				},
				dataType : "json",
				success : function(data) {
					//$("#" + data.day + "-1").text("已预约"+data.status+"次")
					if(data.status == 0)
						$("#" + data.day + "-1").html("<br/>");
					else if(data.status < 4)
						$("#" + data.day + "-1").text("已预约"+data.status+"次").css("color","green");
					else if(data.status >= 16)
						$("#" + data.day + "-1").html("已预约满").css("color","red");
					else
						$("#" + data.day + "-1").text("已预约"+data.status+"次").css("color","orange");
				}
			});
		}
	</script>

</body>
</html>